<template>
  <a-modal
    v-model:visible="showModal"
    :mask-closable="false"
    :title="title || '添加备注'"
    @cancel="onClose"
    @before-ok="onConfirm"
    width="45vw"
    unmount-on-close
  >
    <page-form-row :gutter="24">
      <page-form-item field="memberName" :label="mode == 'shortOrderCost' ? '费用名称' : '备注类型'" size="1">
        <div>{{ mode == 'shortOrderCost' ? labelName : '订单备注' }}</div>
      </page-form-item>
      <page-form-item label="备注信息" size="1">
        <i-input placeholder="请输入" :max-length="200" v-model="form.remark" />
      </page-form-item>
    </page-form-row>
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onConfirm" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>
<script setup>
  import { ref } from 'vue'
  import { Notification } from '@arco-design/web-vue'
  import { createRemarkApi, orderFeeAddRemark } from '@/api/order/sOrder'

  const props = defineProps({
    mode: String,
    title: String,
  })
  const showModal = ref(false)
  const form = ref({})
  const okLoading = ref(false)
  // 费用列表的添加备注
  const labelName = ref('')

  const emit = defineEmits(['ok'])

  const show = (val) => {
    showModal.value = true
    labelName.value = val.itemName
    form.value = {
      id: val.id,
    }
  }

  const onClose = () => {
    okLoading.value = false
    showModal.value = false
    form.value.remark = ''
  }
  const onConfirm = () => {
    okLoading.value = true
    const param = {
      ...form.value,
    }
    let fn = props.mode == 'shortOrderCost' ? orderFeeAddRemark : createRemarkApi
    fn(param)
      .then(() => {
        Notification.success('添加成功')
        showModal.value = false
        emit('ok')
      })
      .finally(() => {
        okLoading.value = false
      })
  }

  defineExpose({
    show,
  })
</script>
